//引入iconfont图标链接
	@import '//at.alicdn.com/t/font_3122992_a2kza1z541p.css';
	
	@font-face {
		font-family: 'webfont';
		font-display: swap;
		src: url('//at.alicdn.com/t/webfont_fps8ks6wa18.eot');
		/* IE9*/
		src: url('//at.alicdn.com/t/webfont_fps8ks6wa18.eot?#iefix') format('embedded-opentype'),
			/* IE6-IE8 */
			url('//at.alicdn.com/t/webfont_fps8ks6wa18.woff2') format('woff2'),
			url('//at.alicdn.com/t/webfont_fps8ks6wa18.woff') format('woff'),
			/* chrome、firefox */
			url('//at.alicdn.com/t/webfont_fps8ks6wa18.ttf') format('truetype'),
			/* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
			url('//at.alicdn.com/t/webfont_fps8ks6wa18.svg#NotoSansHans-Black') format('svg');
		/* iOS 4.1- */
	}
	
	.web-font {
		font-family: "webfont" !important;
		font-size: 15px;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-webkit-text-stroke-width: 0.2px;
		-moz-osx-font-smoothing: grayscale;
		
		&.detail{
			color:var(--color-content-a);
		}
	}
	
	@fullWidth: 100%;
	@fullHeight: 100%;
	
	.seticonColor(@color) {
		cursor: pointer;
	
		&:hover {
			color: @color;
			opacity: 0.7;
		}
	}
	
	.icon {
		&.black {
			.seticonColor(gray);
		}
	
		&.blue {
			.seticonColor(deepskyblue);
		}
	}
	
	.flexLayout {
		display: flex;
		flex-direction: row;
	}
	
	.PositionLayout(@childLayout) {
		position: @childLayout;
	}
	
	.line {
		width: 1px;
		height: 1.25rem;
		margin-left: -0.3rem;
		background-color: #E8E8E8;
	}
	
	#content {
		width: @fullWidth;
		height: auto;
		background-color: var(--color-content);
		//background-color: var(--color-bg-3);
		.PositionLayout(relative);
		transform: translate(0.2%,2%);
		margin-bottom: 2%;
		overflow: hidden;
		
		#title{
			width: 100%;
			height: 30px;
			text-align: left;
			//background-color: skyblue;
			color: var(--color-content-a);
			.PositionLayout(relative);
			padding-bottom: 1%;
			z-index: 3;
			
			#operation{
				width: 30%;
				text-align: right;
				padding-left: 53%;
				//background-color: aquamarine;
				transform: translateY(-105%);
				.PositionLayout(relative);
				z-index: 1;
				
				a-link{
					color: gray;
					
					&:hover {
						color: orangered;
					}
				}
			}
		}
	
		a {
			&:hover {
				opacity: 0.7;
			}
		}
	
		.recommend-effect {
			&:hover {
				transform: scale(1.01);
			}
		}
	
		.product-effect {
			&:hover {
				transform: scale(1.01);
			}
		}
	
		.bigImg {
			width: 450px;
			height: 230px;
			border-radius: 5px;
			padding-top: -10%;
			padding-bottom: 0%;
			//background-color: #fff;
		}
	
		.bigImg-time {
			transform: translate(0%,0%);
			text-align: left;
			.tag-style {
				color: var(--color-text-1);
				border: 1px solid;
			}
		}
		
		.bigImg-price {
			//transform: translate(20%,15%);
			width: auto;
			text-align: right;
		}
		
		.bigImg-type{
			transform: translate(6%,-15%);
			.tag-style {
				font-weight: bold;
				&.blue{
					color: var(--color-text-1);
					background-color: lightskyblue;
					border: 1px solid;
					border-radius: 5px;
				}
				&.orange{
					color: var(--color-text-1);
					background-color: orange;
					border: 1px solid;
					border-radius: 5px;
				}
				&.pink{
					color: var(--color-text-1);
					background-color: hotpink;
					border: 1px solid;
					border-radius: 5px;
				}
			}
		}
	
		.normalImg {
			width: 220px;
			height: 130px;
			border-radius: 5px;
			padding-bottom: 45%;
			background-color: #fff;
		}
		
		.normalImg-time {
			transform: translate(0%,90%);
			text-align: left;
			.tag-style {
				color: #727374;
				background-color: rgb(232,232,232,1%);
				border: 1px solid;
				
				&.blue{
					color: deepskyblue;
					background-color: aliceblue;
				}
			}
		}
		
		.normalImg-price {
			transform: translate(0%,105%);
			width: auto;
			color: #000;
			text-align: left;
		}
		
		.normalImg-type{
			//transform: translate(0%,-10%);
			.tag-style {
				font-weight: bold;
				&.blue{
					color: var(--color-text-1);
					background-color: lightskyblue;
					border: 1px solid;
					border-radius: 5px;
				}
				&.orange{
					color: var(--color-text-1);
					background-color: orange;
					border: 1px solid;
					border-radius: 5px;
				}
				&.pink{
					color: var(--color-text-1);
					background-color: hotpink;
					border: 1px solid;
					border-radius: 5px;
				}
			}
		}
	
		.scale-up-center {
			-webkit-animation: scale-up-center 0.5s;
			animation: scale-up-center 0.5s;
		}
	
		@-webkit-keyframes scale-up-center {
			0% {
				-webkit-transform: scale(0.5);
				transform: scale(0.5);
			}
	
			100% {
				-webkit-transform: scale(1);
				transform: scale(1);
			}
		}
	
		@keyframes scale-up-center {
			0% {
				-webkit-transform: scale(0.5);
				transform: scale(0.5);
			}
	
			100% {
				-webkit-transform: scale(1);
				transform: scale(1);
			}
		}
	
		.scale-in-hor-center {
			-webkit-animation: scale-in-hor-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
			animation: scale-in-hor-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	
		}
	
		@-webkit-keyframes scale-in-hor-center {
			0% {
				-webkit-transform: scaleX(0);
				transform: scaleX(0);
				opacity: 1;
			}
	
			100% {
				-webkit-transform: scaleX(1);
				transform: scaleX(1);
				opacity: 1;
			}
		}
	
		@keyframes scale-in-hor-center {
			0% {
				-webkit-transform: scaleX(0);
				transform: scaleX(0);
				opacity: 1;
			}
	
			100% {
				-webkit-transform: scaleX(1);
				transform: scaleX(1);
				opacity: 1;
			}
		}
	
	
		#left-carousel {
			width: 600px;
			height: 305px;
			padding-top: 2%;
			padding-left: 1%;
			.PositionLayout(relative);
	
			#carousel {
				width: @fullWidth;
				height: @fullHeight;
				.PositionLayout(relative);
	
				#image-title {
					width: @fullWidth;
					height: @fullHeight;
					color: #fff;
					padding-top: 5%;
				}
			}
	
		}
	
		#right-fourImages {
			width: 540px;
			height: 300px;
			//background-color: antiquewhite;
			padding-top: 1%;
			padding-left: 1%;
			.PositionLayout(relative);
		}
	
		.link-style {
			color: var(--color-font);
	
			&:hover {
				color: orangered;
			}
		}
	}
	
	#footer {
		width: @fullWidth;
		height: @fullHeight;
		//background-color: black;
		.flexLayout;
		justify-content: center;
		.PositionLayout(relative);
	}